<template>
  <div curPageName="edit213213124341111" style="height:100%;">

    <div  class="product-card-part-form"> 
      <div class="content"  v-loading="ck_loading">

    
  
    <el-scrollbar>

      <el-table  class="merak-table-container" :data="partsData" border style="width: 100%">
            <el-table-column prop="sku" :label='$t("goods_archive.sku_product")'  />
            <el-table-column prop="supplier_sku" :label='$t("goods_archive.supplier_sku")'  />
            <el-table-column prop="color" :label='$t("goods_archive.size_table_color")' />
            <el-table-column  width="120"  prop="function_name" :label='$t("goods_archive.function_name")'/>
      </el-table>
    </el-scrollbar>
  </div>
    </div>


</div>
</template>


<script setup lang="ts">
import { Plus, Edit, Delete, EditPen, CaretTop, CaretBottom } from "@element-plus/icons-vue";

import { ref, reactive, onMounted, getCurrentInstance, nextTick, watch, computed,inject } from "vue";
import MerakControl, { MerakControlProps } from "@/components/MerakControl";

import {
moreConfirm,
confirmWarningMsg,
successMsg,
warnMsg,
failMsg,
confirmSuccessMsg,
delConfimMsg
} from "@/utils/messageUtils";

import { ElButton, ElScrollbar, ElForm, ElMessage, ClickOutside as vClickOutside } from "element-plus";
import I18n from "@/languages/index";
import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";

import { ResultEnum } from "@/enums/httpEnum";
import { getFacility } from "@/api/modules/goodsArchive/addGoodsArchive";
import { useRouter, useRoute } from "vue-router";
import editTableMini from "@/components/MerakEditTable/components/editTableMini/index.vue";
import uploadPic from "@/components/uploadFileMerak/picUpload.vue";
import { number } from "mathjs";
import { BlockKeys, BlockRefs } from "../index";

const { query } = useRoute();
const $t = I18n.global.t;
const props = defineProps<{
// 当前模式 default: 添加  edit: 编辑  copy: 复制
type: FormType;
//单条数据
row?:Record<string, any>;
// 表单配置项
formConfig: Record<string, any>;
// 表单渲染数据
specsInitial: Record<string, any>;
// 表单只读字段集合
formReadonly: Array<string>;
// 回显数据
  formValue: Array<Record<string, any>>;
}>();

const emits = defineEmits<{
close: [saved?: boolean];
}>();



//部件信息展示
const partsData=ref([]);
const ck_loading=ref(false)
const editMiniData=ref({
    columnsValue: [
      { field: "sku", title: "系统货号" },
      { field: "category", title: "品类" },
      { field: "color", title: "颜色" },
      { field: "part_quantity", title: "部件数量" },
      { field: "split_sequence", title: "拆分图序号" },
    ],
    dataValue: [
      {
        sku: "",
        category: "",
        color: "",
        part_quantity: "",
        split_sequence:"",

      }
    ]
  }) 
const skuOptions=ref([]);
const modalTypeEdit=ref(false)
const skuinfo=ref([])

// 初始化选项
onMounted(() => {
console.log(props.row.product_id)
getPartsInfoFun()


});

const changeTypeEditFun= (row) => {
modalTypeEdit.value=true;
}

const changesku= (sku,row) => {

var new_skuinfo = JSON.parse(JSON.stringify(skuinfo.value));
new_skuinfo.filter(item=>{
  if(item.product_id==sku){
    console.log(item)
    row.category=item.category;
    row.color=item.color;
  }
})


}




// 操作小表格的增加
const plusCol = data => {
var _obj = {
        sku: "",
        category: "",
        color: "",
        part_quantity: "",
        split_sequence:"",
        skuOptions:skuOptions.value
      }
data.push(_obj);
};
// 操作小表格的删除
const delOne = (index, ever,type,everdata) => {
if (ever.length > 1) {
  ever.splice(index, 1);
}
};

const appenoptionsFun = (kye,row) => {
console.log(row)
if(kye){
  row.skuOptions=skuOptions.value;
}


}




const submitForm = () => {
console.log(editMiniData.value.dataValue)

for (let index = 0; index < editMiniData.value.dataValue.length; index++) {
  const element = editMiniData.value.dataValue[index];
  console.log(element)
  element.part_quantity_errInfo='';
  element.split_sequence_errInfo='';
  element.evergo=1;
  if(element.sku){
    if(element.part_quantity==''){
      element.part_quantity_errInfo='不能为空'
      element.evergo=0;
    }
    if(element.split_sequence==''){
        element.split_sequence_errInfo='不能为空'
        element.evergo=0;
    }
  }
  
  
}


const post_editMiniData= JSON.parse(JSON.stringify(editMiniData.value.dataValue));
const savedata=post_editMiniData.filter(item=>{
  if(item.evergo==1 && item.sku){
    delete item.evergo;
    delete item.skuOptions;
    return item;

  }
})
console.log(savedata)

var godata={
  product_id:'8855477',
  inn:savedata
}

savePartsFun (props.row.product_id,godata)














}


const savePartsFun = (product_id,data) => {
ck_loading.value=true;
saveParts(data).then(({ code, data }) => {
  ck_loading.value=false;
  if (code == ResultEnum.SUCCESS) {
    ElMessage.success("修改部件信息成功");
    getPartsInfoFun(product_id);
    modalTypeEdit.value=false;
  } else {
    
  }
});

}


const getPartsInfoFun = (product_id) => {
ck_loading.value=true;
var product_id=props.row.product_id;
getFacility(product_id).then(({ code, data }) => {
  ck_loading.value=false;
  if (code == ResultEnum.SUCCESS) {
    partsData.value=data;
    editMiniData.value.dataValue= JSON.parse(JSON.stringify(data));;
    if(data.length<1){
      plusCol(editMiniData.value.dataValue)

    }
  } else {
    
  }
});

}








</script>

<style scoped lang="scss">
.content{
display:flex;flex-direction: column;
}
.content.edit{
margin-bottom:0;
display:block;

}
.product-card-part-form {
display: flex;
flex-direction: column;
height: 100%;
& > :first-child {
  flex: 1;
  margin-bottom: var(--merak-padding);
  min-height: 0;
}
& > :first-child.edit{
  flex: auto;
}
.errorTip {
font-size: 11px;
color: rgb(228, 15, 15);
text-align: left;
}
.handler {
  text-align: right;
}
.goods_spec_footer {
  border-top: 1px solid var(--el-border-color-lighter);
  padding: var(--el-drawer-padding-primary);
  padding-bottom: 0;
  margin: 0 -30px;
  text-align: center;
  background-color: #fff;
  z-index: 9;
}
.modal_tit{
  margin-bottom:10px;
  text-align:right;
}
}

</style>
